<template>
  <div class="pannel-container flex-column">
    <div class="pannel-title">
      <span class="t-name">收入分析</span>
    </div>
    <time-tab class="mt-10" :active.sync="timeBar"></time-tab>
    <div id="srfx">

    </div>
    <div class="label-box ">
      <div class="flex-column-center item" v-for="item in seriesList">
        <span :style="{color:item.color}">{{timeBar==='year'?item.incomeValueByYear:item.incomeValueByMonth}}</span>
        <span>{{item.incomeName}}</span>
      </div>
    </div>
  </div>
</template>
<script>
  import {fontSizeRem} from '../../utils'
  import 'echarts-liquidfill/src/liquidFill.js' //在这里引入
  var colors = [
    [{
      offset: 1,
      color: '#08B0E8'
    }, {
      offset: 0,
      color: '#29F29C'
    }], [{
      offset: 1,
      color: '#038CFB'
    }, {
      offset: 0,
      color: '#28D9FF'
    }], [{
      offset: 1,
      color: '#F45D3F'
    }, {
      offset: 0,
      color: '#FFB085'
    }],
  ]
  const ballColor = ['#25E9A6', '#21C9FF', '#F87F5F']
  import timeTab from '@/components/time-tab'

  export default {
    name: 'Srfx',
    data () {
      return {
        chart: null,
        option: {
          series: [{
            type: 'liquidFill',
            data: [0,0],
            radius: '60%',
            // 水球颜色
            itemStyle: {
              opacity: 1,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: colors[0],
                globalCoord: false
              },
            },
            center: ['20%', '50%'],
            // outline  外边
            outline: {
              borderDistance: 7,
              itemStyle: {
                borderWidth: 5,
                borderColor: 'rgba(25, 198, 213, .2)',
              },
            },
            label: {
              show: false,
            },
            // 内图 背景色 边
            backgroundStyle: {
              color: 'rgba(4,24,74,0.8)',
            }
          }, {
            type: 'liquidFill',
            data: [0,0],
            radius: '60%',
            // 水球颜色
            itemStyle: {
              opacity: 1,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: colors[1],
                globalCoord: false
              },
            },
            center: ['50%', '50%'],
            // outline  外边
            outline: {
              borderDistance: 7,
              itemStyle: {
                borderWidth: 5,
                borderColor: 'rgba(47, 220, 242, .2)',
              },
            },
            label: {
              show: false,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold',
                formatter: '{c}'
              }
            },
            // 内图 背景色 边
            backgroundStyle: {
              color: 'rgba(4,24,74,0.8)',
            }
          }, {
            type: 'liquidFill',
            data: [0,0],
            radius: '60%',
            // 水球颜色
            itemStyle: {
              opacity: 1,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: colors[2],
                globalCoord: false
              },
            },
            center: ['80%', '50%'],
            // outline  外边
            outline: {
              borderDistance: 7,
              itemStyle: {
                borderWidth: 5,
                borderColor: 'rgba(255, 176, 133, .2)',
              },
            },
            label: {
              show: false,
            },
            // 内图 背景色 边
            backgroundStyle: {
              color: 'rgba(4,24,74,0.8)',
            }
          }]
        },
        seriesList: [
          {
            name: '委实号1',
            value: 888,
            color: '#25E9A6'
          }, {
            name: '委实号2',
            value: 420,
            color: '#21C9FF'
          }, {
            name: '其他',
            value: 300,
            color: '#F87F5F'
          },
        ],
        timeBar:'year',
      }
    },
    props: {
      incomeAnalysisTableList: {
        type: Array,
        default: []
      }
    },
    components: {
      timeTab
    },
    methods: {
      setOption () {
        this.seriesList = []
        let sum = 0
        this.incomeAnalysisTableList.forEach((o, i) => {
          const value = this.timeBar === 'year'?o.incomeValueByYear:o.incomeValueByMonth

          sum += value
          this.seriesList.push({
            ...o,
            color: ballColor[i]
          })
        })
        this.option.series.forEach((o,i)=>{
          const value = this.timeBar === 'year'?this.incomeAnalysisTableList[i].incomeValueByYear:this.incomeAnalysisTableList[i].incomeValueByMonth
          const result = (value/sum).toFix(2)
          o.data = [result,result-0.05]
        })
        this.chart.setOption(this.option, true)
      },
      initChart () {
        this.chart = this.$echarts.init(
          document.getElementById(`srfx`)
        )
        this.chart.setOption(this.option, true)
      }
    },
    mounted () {
      this.initChart()
    }
  }
</script>
<style scoped lang="scss">
  .pannel-container {
    width: 100%;
    background: url("../../assets/imgs/srfx_bg.png");
    padding: 23px;

    .pannel-title {
      background: url("../../assets/imgs/srfx_title.png") no-repeat;
    }

    #srfx {
      flex: 1;
    }

    .label-box {
      width: 100%;
      position: relative;
      height: 90px;
      flex: none;

      .item:nth-child(1) {

        left: 20%;
        transform: translateX(-50%);
      }

      .item:nth-child(2) {
        left: 50%;
        transform: translateX(-50%);
      }

      .item:nth-child(3) {
        left: 80%;
        transform: translateX(-50%);
      }

      .item {
        position: absolute;
        span:nth-child(1) {
          font-family: number-font;
          font-size: 56px;
          line-height: 1;
        }

        span:nth-child(2) {
          font-weight: bold;
          font-size: 32px;
          color: #ECF0FF;
        }
      }
    }
  }
</style>
